<template>
	<view class="floatbutton" v-if="show" :style="'background:'+bgcolor+';right:'+right+';bottom:'+bottom+';'">
		<image class="img" :src="avatar"></image>
		<view class="vtxt"><text class="txt" :style="'color:'+color+';'">{{text}}</text></view>
	</view>
</template>

<script>
	import serviceimg from "@/static/serviceimg.png"
	export default {
		name: 'aboutus',
		props: {
			show: {
				type: Boolean,
				default: true
			},
			avatar: {
				type: String,
				default: serviceimg
			},
			text: {
				type: String,
				default: '在线客服'
			},
			color: {
				type: String,
				default: ''
			},
			bgcolor: {
				type: String,
				default: ''
			},
			right: {
				type: String,
				default: ''
			},
			bottom: {
				type: String,
				default: ''
			},
		},
		data() {
			return {}
		},
		methods: {

		}
	}
</script>

<style scoped>
	.floatbutton {
		/* position: fixed;
		right: 30rpx;
		bottom: 100rpx; */
		background: linear-gradient(to bottom, #ff3b3b, #ffa45a);
		padding: 2px;
		border: 4rpx solid #fff;
		border-radius: 60rpx;
		width: 68rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.floatbutton .img {
		width: 68rpx;
		height: 68rpx;
		/* #ifdef APP-NVUE */
		width: 56rpx;
		height: 56rpx;
		/* #endif */
		border-radius: 32rpx;
	}

	.floatbutton .vtxt {
		padding: 10rpx 0;
		display: flex;
		width: 40rpx;
		align-items: center;
		justify-content: center;
	}

	.floatbutton .vtxt .txt {
		color: #fff;
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 36rpx;
		text-align: center;
	}
</style>